<template lang="pug">
  v-container
    CustomerDetails(ref="details" :customer="customer" @refresh="refresh")
    v-card
      v-toolbar
        v-text-field(prepend-inner-icon="search" placeholder="搜索" hide-details v-model="query" clearable)
        v-spacer
        v-toolbar-items
          v-btn(text @click="refresh") 刷新
          v-btn(text @click="add") 新增客户信息
      v-divider
      v-card-text.pa-0.mt-4
        CustomerDataTable(@edit="edit" ref="dataGrid" :query.sync = "query")
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import CustomerDataTable from './customer_data_table'
  import CustomerAddDialog from './customer_add_dialog'
  import CustomerDetails from './customer_details'
  import {Customer} from '@/store/modules/types/Customer'

  export default (Vue as VueConstructor<Vue & {
    buildEmptyCustomer: () => Customer
    $refs: {
      dataGrid: CustomerDataTable,
      details: CustomerDetails
    }
  }>).extend({
    name: 'Customer',
    methods: {
      buildEmptyCustomer(): Customer {
        return {
          name: null,
          address: null,
          tel: null,
          email: null,
          contact_name: null,
          contact_tel: null,
          contact_email: null,
          identify_code: null
        }
      },
      refresh() {
        this.$refs.dataGrid.refresh()
      },
      add() {
        this.customer = this.buildEmptyCustomer()
        this.$refs.details.create('新增客户信息')
      },
      edit(item: Customer) {
        this.customer = item
        this.$refs.details.toggle(`客户 ${this.customer.name}`)
      }
    },
    components: { CustomerDataTable, CustomerDetails },
    data() {
      let emptyCustomer = this.buildEmptyCustomer
      return {
        customer: emptyCustomer,
        query: ""
      }
    }
  })
</script>
